import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	TouchableOpacity,
	View
} from 'react-native';

/**
 * @FileName: DTouchableDemo
 * @Author: mazaiting
 * @Date: 2018/6/8
 * @Description:
 */
class DTouchableDemo extends Component {
	
	constructor(props){
		super(props);
		this.state = {
			title: '初始化文本'
		};
	}
	
	render() {
		return (
			// ref 绑定 View
			<View ref={'topView'} style={styles.container}>
				{/*点击，透明度变化，activeOpacity取值0-1*/}
				<TouchableOpacity
					activeOpacity={0.5}
					// onPress={this.renderPress()}
					// onPress={() => this.renderPress()}
					onPress={()=>this.activeEvent("点击")}
					onPressIn={()=>this.activeEvent("按下")}
					onPressOut={()=>this.activeEvent("抬起")}
					onLongPress={()=>this.activeEvent("长按")}
					>
					<Text>{this.state.title}</Text>
				</TouchableOpacity>
			</View>
		)
	}
	
	/**
	 * 事件
	 * @author mazaiting
	 */
	activeEvent(event) {
		// 获取指定View
		// this.refs.topView;
		// 设置数据
		this.setState((previousState) => {
			return { title: event}
		});
	}
	
	/**
	 * 按下鼠标，执行此方法
	 * @author mazaiting
	 */
	renderPress() {
		alert('点击')
	}
}

const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	}
});

module.exports = DTouchableDemo;